<template>
  <view class="job-manage-list">
    <view class="job-manage-item" v-for="(item, itemIndex) in data" :key="item[props.id]">
      <view class="item-info u-border-bottom" @click="handleDetail(item, itemIndex)">
        <view class="title-top">
          <text class="title">{{item[props.jobname]}}
            <text v-if="item[props.is_topping]" class="icon icon-top"></text>
            <text v-if="item.is_pay==1" class="icon icon-pay"></text>
          </text>
          <text class="salary">{{item[props.salary]}}</text>
        </view>
        <view class="tag-list">
          <text
            class="tag-item"
            v-for="(tagitem, index) in item[props.tagList]"
            :key="index"
            type="info"
          >{{tagitem}}</text>
        </view>
        <text class="time">{{item[props.time]}}</text>
      </view>
      <view class="opea-bottom" :class="{around: opeaList.length < 3}">
        <view
          class="opea-item"
          v-for="(oitem, index) in opeaList"
          :key="index"
          @click="handleOpeaItem(oitem, item[props.id], item, itemIndex)"
        >
          <template v-if="oitem.showOther && item[oitem.disable]">
            <text :class="['opea-icon', oitem.status, {disable: item[oitem.disable]}]"></text>
            <text class="opea-disable">{{oitem.otherName}}</text>
          </template>
          <template v-else>
            <text :class="['opea-icon', oitem.status]"></text>
            {{oitem.name}}
          </template>
          
        </view>
        <view class="opea-more" v-if="item.showMore">
          <view
            class="opea-item"
            v-for="(mItem, mIndex) in opeaMoreList"
            :key="mIndex"
            @click="handleOpeaItem(mItem, item[props.id], item, itemIndex)"
          >
            <text :class="['opea-icon', mItem.status]"></text>
            {{mItem.name}}
          </view>
        </view>
      </view>

    </view>
    <u-loadmore
      class="job-manage-more"
      :status="status"
      :load-text="loadText"
    />
    <view v-show="data.length && showTopTips" class="u-text-center top-tips">双击在招职位卡片可置顶职位～</view>
  </view>
</template>

<script>
export default {
  name: "jobList",
  props: {
    props: {
      type: Object,
      default() {
        return {
          id: "id",
          jobname: "jobname",
          salary: "salary",
          tagList: "tagList",
          time: "time",
          isTop: 'is_topping',
        };
      }
    },
    data: {
      type: Array,
      default: () => []
    },
    opeaList: {
      type: Array,
      default: () => []
    },
    status: {
      type: String,
      default: "loadmore"
    },
    opeaMoreList: {
      type: Array,
      default: () => []
    },
    showMore: {
      type: Boolean,
      default: false,
    },
    showTopTips: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了"
      },
    };
  },
  methods: {
    handleDetail(item, index) {
      this.$emit("item-click", {item: item, index});
    },
    handleOpeaItem(item, id, dataItem, itemIndex) {
      if(item.status == 'more') {
        this.$emit('more-click', itemIndex);
      } else {
        if(dataItem[item.disable]) return;
        this.$emit(`${item.status}-click`, {id, item: dataItem, index:itemIndex});
      }
    }
  }
};
</script>

<style lang="scss">
$img-base-dresume: $img-base + "dresume/";
.job-manage-list {
  margin: 0 32rpx;
  padding-bottom: 190rpx;
  .job-manage-item {
    margin-top: 24rpx;
    padding: 32rpx;
    border-radius: $uni-border-radius-lg;
    background-color: $uni-bg-color;
    .item-info {
      padding-bottom: 32rpx;
    }
    .title-top {
      display: flex;
      justify-content: space-between;
      .title,
      .salary {
        font-size: $uni-font-size-lg;
        font-weight: bold;
        color: $uni-text-color-222;
      }
      .salary {
        color: $u-type-primary;
      }
      .icon-top {
        width: 28rpx;
        height: 28rpx;
        margin-left: 12rpx;
        margin-top: -8rpx;
        background: url($img-base+"common/top_text.png") no-repeat center / 100% 100%;
      }
      .icon-pay {
        width: 56rpx;
        height: 28rpx;
        margin-left: 8rpx;
        background-image: url($img-base-dresume + "/pay.png");
      }
    }
    
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      margin: 24rpx 0 0 0;
      .tag-item {
        margin: 0 16rpx 16rpx 0;
        background-color: $uni-bg-color-disable;
        border-radius: 6rpx;
        padding: 12rpx;
        border: none;
        font-size: $uni-font-size-sm;
        color: $uni-text-color-555;
      }
    }
    .time {
      color: $uni-text-color-555;
    }
    .line {
      padding-top: 32rpx;
    }
    .opea-bottom {
      position: relative;
      padding-top: 22rpx;
      display: flex;
      justify-content: space-between;
      &.around {
        justify-content: space-around;
      }
    }

    .opea-item {
      display: flex;
      align-items: center;
      color: $uni-text-color-222;
      .opea-icon {
        display: inline-block;
        background: url($img-base-dresume+"edit.png") no-repeat
          center / 100% 100%;
        width: 36rpx;
        height: 36rpx;
        margin-right: 12rpx;
        &.edit {
          background: url($img-base-dresume+"edit.png?v=1") no-repeat center /
            100% 100%;
          &.disable {
            background: url($img-base-dresume+"edit_d.png") no-repeat center / 100% 100%;
          }
        }
        &.start {
          background: url($img-base-dresume+"start.png") no-repeat center /
            100% 100%;
        }
        &.delete {
          background: url($img-base-dresume+"delete.png?v=1") no-repeat center /
            100% 100%;
        }
        &.stop {
            background: url($img-base-dresume+"stop.png?v=1") no-repeat center /
            100% 100%;
        }
        &.more {
          background: url($img-base-dresume+"more_new.png") no-repeat center /
            100% 100%;
        }
        &.refresh {
          background: url($img-base-dresume+"refresh.png") no-repeat center /
            100% 100%;
        }
        &.top {
          background: url($img-base-dresume+"top.png") no-repeat center / 100% 100%;
          &.disable {
            background: url($img-base-dresume+"top_d.png") no-repeat center / 100% 100%;
          }
        }
      }

      .opea-disable {
        color: $uni-text-color-999;
      }
    }

    .opea-more {
      position: absolute;
      right: -12rpx;
      top: 70rpx;
      z-index: 1;
      padding: 16rpx;
      background-color: #FFF;
      border: 2rpx solid $u-type-primary;
      border-radius: 6rpx;
      box-shadow: 0 10rpx 16rpx 0 rgba(247, 90, 62, 0.28);

      $right: 64%;
      &:before {
        position: absolute;
        display: block;
        box-sizing: content-box;
        width: 0;
        height: 0;
        top: -16rpx;
        right: $right;
        padding: 0;
        border-bottom: 8rpx solid #ffffff;
        border-left: 8rpx solid transparent;
        border-top: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        content: '';
        z-index: 3;
      }
      
      &:after {
        position: absolute;
        display: block;
        box-sizing: content-box;
        width: 0;
        height: 0;
        top: -18rpx;
        right: $right;
        padding: 0;
        border-bottom: 8rpx solid $u-type-primary;
        border-left: 8rpx solid transparent;
        border-top: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        content: '';
        z-index: 2;
      }
            
      .opea-item {
        margin-bottom: 10rpx;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
  .top-tips {
    font-size: 24rpx;
    color: #999;
  }

}
</style>